// 通过 webpack-merge 插件 合并配置文件
// const merge = require ('webpack-merge');
//获取 webpack.common.js 文件
// const common = require ('./webpack.common.js');

//在 node.js下获取 获取路径
const path = require('path');

//引用本地 webpack 功能
const webpack = require('webpack');
//引用html-webpack-plugin 生成新的HTML模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引用extract-text-webpack-plugin 把 CSS 分离成文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//引用clean-webpack-plugin 打包前先清除dist文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  //定义打包入口
  entry: {
    main: './src/index.js'
  },
  //定义输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    //[name]对应的是 entry中的"app.bundle"
    filename: '[name].js'
  },
  plugins: [
    // 重构首页模板
    new HtmlWebpackPlugin({
      //选择重构的模板
      template: './src/index.html',
      //可以对文件重命名
      // filename: 'indexxxxx.html',
      //不插入生成的 js 文件，只是单纯的生成一个 html 文件
      inject: true,
      minify: {
        collapseWhitespace: false //是否压缩
      },
      hash: false //是否添加 哈希 值
    }),
    // HMR 模块热替换
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    //重构CSS文件
    new ExtractTextPlugin('./index.css'),
    //抽离功能模块
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['main']
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  module: {
    rules: [
      //加载jquery
      // {
      //   test: require.resolve('jquery'),
      //   use: ['script-loader']
      // },
      //处理 html 文件
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false
            }
          }
        ]
      },
      //处理 css
      {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              // loader: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
              loader: 'css-loader',
              options: {
                minimize: false, //css压缩
                sourceMap: true
              }
            },
            {
              // loader: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
              loader: 'sass-loader',
              options: {
                minimize: false, //css压缩
                sourceMap: true
              }
            }
          ]
        })
      },
      //处理 ES6 语法
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      //配置图片 用于开发环境
      {
        test: /\.(jpg|png|gif|jpeg|bmp)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img/'
          }
        }
      },
      //配置字体图标 用于开发环境
      {
        test: /\.(woff|woff2|svg|ttf|eot)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      }
    ]
  },
  //配置 webpack-dev-server 工作选项
  devServer: {
    // 设置路径根目录
    contentBase: path.join(__dirname, 'localFiles'),
    port: 9670,
    open: false,
    hot: true,
    // 处理一下本地post请求的问题
    before(request) {
      request.post('/js/null.json', function(req, res) {
        res.json({ data: 'something' });
      });
    },
    // publicPath: '/',
    // historyApiFallback: true,
    proxy: {
      '/v2/**': {
        // 目标服务器地址
        target: 'http://api.douban.com',
        // 目标服务器地址是否是安全协议
        secure: false,
        // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!
        changeOrigin: true
        // '/api/login' =>    target + '/login'
        // pathRewrite: { '^/api': '/' } // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
      }
    }
  },

  //使用 source-map 工具 可以定位错误代码
  devtool: 'source-map'
};
